<template>
    <el-card shadow="never" class="border-0">
      <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="标题" width="140">
          <template #default="{ row }">
            <div class="flex items-center">
              <div class="ml-3">
                <h6>{{ row.title }}</h6>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="类型" width="70">
          <template #default="{ row }">
            <div class="flex items-center">
              <div class="ml-3">
                <h6>{{ getType(row.type) }}</h6>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="作者名称" width="140">
          <template #default="{ row }">
            <div class="flex items-center">
              <div class="ml-3">
                <h6>{{ row.authorName }}</h6>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="作者邮箱" width="180">
          <template #default="{ row }">
            <div class="flex items-center">
              <div class="ml-3">
                <h6>{{ row.authorEmail }}</h6>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审批状态" width="100">
          <template #default="{ row }">
            <div class="flex items-center">
              <div class="ml-3">
                <h6>{{ getApproveStatus(row.approveStatus) }}</h6>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审批时间" width="155">
          <template #default="{ row }">
            <div class="flex items-center">
              <div class="ml-3">
                <h6>{{ getApproveTime(row.approveTime) }}</h6>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审批人" width="70">
          <template #default="{ row }">
            <div class="flex items-center">
              <div class="ml-3">
                <h6>{{ row.approveUserName }}</h6>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="代码下载" width="100">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="downloadFile(row.codeUrl)">下载文件</el-button>
          </template>
        </el-table-column>
        <el-table-column label="说明文档下载" width="110">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="downloadFile(row.documentUrl)">下载文件</el-button>
          </template>
        </el-table-column>
        <el-table-column label="描述" width="200">
          <template #default="{ row }">
            <div v-if="isTextTooLong(row.description) && !row.descriptionShowAll">
              {{ row.description.substring(0, 20) }}...
              <el-link @click.prevent="toggleText(row)" type="primary">展开</el-link>
            </div>
            <div v-else>
              {{ row.description }}
              <el-link v-if="isTextTooLong(row.description)" @click.prevent="toggleText(row)" type="primary">收起</el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审批" width="180" align="center">
          <template #default="{ row }">
            <div v-if="isUnApprove(row.approveStatus)">
              <el-button type="primary" size="small" text @click="approving(1,row)">审批</el-button>
              <el-button type="primary" size="small" text @click="approving(2,row)">拒绝</el-button>
            </div>
            <div v-else>
              {{ row.approveIdea }}
            </div>
          </template>
        </el-table-column>
      </el-table>
  
      <div class="flex items-center justify-center mt-5">
        <el-pagination background layout="total,prev, pager ,next" 
        :total="pageTotal" v-model:value="current" :page-size="pageSize"
          @current-change="handleCurrentChange" />
      </div>


      <el-dialog v-model="dialogFormVisible" :title="approveForm.approveStatus === 1 ? '审批' : '拒绝'" width="500">
        <el-form :model="approveForm">
          <el-form-item label="审批意见" :label-width="formLabelWidth">
            <el-input v-model="approveForm.approveIdea" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="toApprove">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
  
    </el-card>
  </template>
  <script setup>
  import { ref, onMounted, computed } from "vue"
  import { toast } from '~/composables/utils'
  import { format } from 'date-fns';
  import { ElButton } from 'element-plus';
  import 'element-plus/theme-chalk/el-icon.css'; // 确保引入了图标的样式
  import {
    getPageList,
    approve,
  } from "~/api/datasource"
  const loading = ref(true)

  const tableData = ref([]);

  const current = ref(1);
  const pageSize = ref(20);
  const pageTotal = ref(0);

  //类型枚举
  const typeListEnum = [
    {name: "链接", index: 1 },
    {name: "文章", index: 2 },
    {name: "图片", index: 3 },
    {name: "视频", index: 4 },
  ]
  const getType = (index) =>{
    return typeListEnum.find(item => item.index === index).name;
  }

  //审批状态枚举
  const approveStatusEnum = [
    {name: "未审批", index: 0 },
    {name: "已审批", index: 1 },
    {name: "已拒绝", index: 2 },
  ];
  //判断审批状态是否为未审批
  const isUnApprove = (status) => {
    if(status === 0){
      return true;
    }else{
      return false;
    }
  }
  //审批表单
  const approveForm = ref({
    id: '',
    approveIdea: '',
    approveStatus: 1
  });

  const dialogFormVisible = ref(false)

  //审批按钮触发
  const approving = (status, row) => {
    //修改确认框内容
    approveForm.value.id = row.id
    approveForm.value.approveStatus = status
    dialogFormVisible.value = true
  }
  //进行审批
  const toApprove = () => {
    approve(approveForm.value).then((res) => {
      dialogFormVisible.value = false
      approveForm.value = {};
      toast("审批成功！");
      getTableData();
    })
  }


  const getApproveStatus = (index) =>{
    return approveStatusEnum.find(item => item.index === index).name;
  }
  //设置时间格式
  const formatDate = (date) => {
    return format(new Date(date), 'yyyy-MM-dd HH:mm');
  }

  const getApproveTime = (time) => {
    if(time == null){
      return null;
    }
    return formatDate(time)
  }

  //根据url下载方法
  const downloadFile = (url) => {
      const link = document.createElement('a')				// 创建链接标签，即a标签，并将dom命名为link
      link.href = url											// 为dom为link的元素添加链接
      link.setAttribute('download', '')						// 为link设置下载属性
      document.body.appendChild(link)							// 把创建并配置好的link dom添加到页面文档中
      link.click()											        // 模拟dom的点击事件
      document.body.removeChild(link)							// 从文档中移出link节点
      getTableData()									      // 调用写好的方法刷新数据
  }

//初始化列表信息
const getTableData = () => {
    loading.value = true
    getPageList({current: current.value,pageSize: pageSize.value}).then((res) => {
        tableData.value = res.records
        pageTotal.value = Number(res.total)
        loading.value = false
    })
}

const handleCurrentChange = (newPage) => {
  current.value = newPage;
  getTableData();
}

//判断字符串是否太长
const isTextTooLong = (text) => {
    return text.length > 20;
}

//展开或收起
const toggleText = (row) => {
  const isUnfold = !row.descriptionShowAll;
  row.descriptionShowAll = isUnfold
} 
onMounted(async () => {
  try {
    getTableData();
  } catch (error) {
    console.error(error);
  }
});
</script>